<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = "http://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <%@include file="/page/view/common/head.jsp" %>
    <link rel="stylesheet" href="<%=path%>plugins/fakeloader/fakeLoader.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <div class="modal fade" id="modal-default" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="box box-default">
                    <div class="box-header">
                        <h3 class="box-title"></h3>
                    </div>
                    <div class="box-body">

                    </div>
                    <div class="overlay">
                        <i class="fa fa-refresh fa-spin"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content-wrapper" style="margin-left: 0px;">
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">搜索条件</h3>
                        </div>
                        <form class="form-horizontal">

                            <div class="box-body">
                                <div>
                                    <div class="form-group col-sm-4">
                                        <label for="nickName" class="col-sm-3 control-label">昵称</label>

                                        <div class="col-sm-9">
                                            <input type="text" class="form-control search-input" id="nickName"
                                                   placeholder="昵称">
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <label for="loginName" class="col-sm-3 control-label">登录名</label>

                                        <div class="col-sm-9">
                                            <input type="text" class="form-control search-input" id="loginName"
                                                   placeholder="登录名">
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <label for="status" class="col-sm-3 control-label">状态</label>
                                        <div class="col-sm-9">
                                            <select class="form-control search-select" id="status">
                                                <option value="0">请选择</option>
                                                <c:forEach items="${options}" var="item">
                                                    <option value="${item.get("value")}">${item.get("name")}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="box-footer">
                                <button type="button" class="btn btn-primary pull-right" id="do_search">搜索</button>
                                <button type="button" class="btn btn-warning pull-right" id="clear_input">清空</button>
                            </div>
                        </form>
                    </div>
                    <div class="box col-xs-3">
                        <div class="box-header">
                            <h3 class="box-title">会员列表</h3>
                        </div>
                        <div class="box-body">

                            <table id="example1" class="table table-bordered table-striped">

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<%@include file="/page/view/common/footer.jsp" %>
</body>
<script src="<%=path%>bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="<%=path%>bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script>
    $(function () {
        $("#clear_input").click(function () {
            $(".search-input").val("");
            $(".search-select").val("0");
        });

        $("#do_search").click(function () {
            table.ajax.reload();
        });

        var table = $('#example1').on("preXhr.dt", function (e, setting, processing) {
            // $("#progress").addClass("show");
            $("#modal-default").modal("show");
        }).on("xhr.dt", function (e, settings, json, xhr) {
            // $("#progress").addClass("hide");
            $("#modal-default").modal("hide");
        }).DataTable({
            ordering: false,
            bServerSide: true,
            sAjaxSource: "<%=path%>user/list",
            fnServerData: retrieveData,
            autoWidth: false,
            pageLength: 10,
            lengthChange: false,
            searching: false,
            processing: false,
            scrollX: true,
            // pagingType: "input",
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            columns: [
                // {
                //     "data": "userId",
                //     "title": "用户ID",
                //     // "":""
                // },
                {
                    "data": "nickname",
                    "title": "昵称",
                },
                {
                    "data": "loginname",
                    "title": "登录名",
                },
                {
                    "data": "status",
                    "title": "状态",
                    "render": function (data, type, full, meta) {
                        var res = '<span class="label label-danger> 未知 </span>';
                        if (data == 1) {
                            res = '<span class="label label-danger"> 启用 </span>';
                        } else if (data == 2) {
                            res = ' <span class="label label-warning"> 禁用 </span>';
                        }
                        return res;
                    }
                },
                {
                    "data": "ps",
                    "title": "备注",
                    "render": function (data, type, full, meta) {
                        if (data == null || data == undefined) {
                            data = "";
                        }
                        return data;
                    }
                },
                {
                    "data": "id",
                    "title": "操作",
                    "render": function (data, type, full, meta) {
                        var res = '<div>';
                        res += '<button class="btn btn-primary btn-sm" href="#"><i class="fa fa-info-circle fa-fw"></i>详情</button>';
                        res += '<button class="btn btn-warning btn-sm" href="#"><i class="fa fa-edit fa-fw"></i>修改</button>';
                        res += '<button class="btn btn-danger btn-sm" href="#"><i class="fa fa-trash-o fa-fw"></i>删除</button>';
                        res += '</div>';
                        return res;
                    }
                }
            ]
        });

        function retrieveData(sSource, aoData, fnCallback) {
            var params = {
                "nickName": $("#nickName").val(),
                "loginName": $("#loginName").val(),
                "status": $("#status").val(),
                "displayStart": aoData[3]["value"],
                "displayLength": aoData[4]["value"]
            }
            $.ajax({
                "type": "GET",
                "contentType": "application/json; charset=UTF-8",
                "url": sSource,
                "dataType": "json",
                "data": params, //以json格式传递
                "success": function (resp) {
                    var data = {};
                    data["iTotalRecords"] = resp["data"]["totalAmount"];
                    data["iTotalDisplayRecords"] = resp["data"]["list"].length;
                    data["aaData"] = resp["data"]["list"];
                    // data["sEcho"] = resp["data"]["totalPage"];
                    fnCallback(data); //服务器端返回的对象的returnObject部分是要求的格式

                }
            });
        }
    })
</script>
</html>



